/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */

// 搜索模块
<template>
  <div id="left-panel">
    <!-- 搜索框 -->
    <div id="searchbox">
      <div id="searchbox-container">
        <div id="sole-searchbox-content" class="searchbox-content">
          <input @keyup.enter="handlerSearchEnter" v-model="search" @focus="searchFocus()" @blur="searchUnFocus()" id="sole-input" class="searchbox-content-common" type="text" name="word" autocomplete="off" maxlength="256" placeholder="请输入搜索内容" value="">
          <el-tooltip effect="dark" content="清空" placement="bottom">
            <div class="input-clear" title="清空" @click="clearSearch">
              <i class="iconfont icon-clear"></i>
            </div>
          </el-tooltip>
        </div>
      </div>
      <el-tooltip effect="dark" content="搜索" placement="bottom">
        <button id="search-button" data-title="搜索" @click="handlerSearchEnter"></button>
      </el-tooltip>
    </div>
    <!-- 类型选择+搜索历史 -->
    <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <div id="history" v-show="historyVisible">
        <ul>
          <div class="type-list" >
            <div class="type" @click="searchByType('ALl')"><i class="iconfont icon-quanbu-copy"></i>全部</div>
            <div class="type" @click="searchByType('IN_PLAN')"><i class="iconfont icon-jinhangzhong"></i>计划中</div>
            <div class="type" @click="searchByType('IN_PROGRESS')"><i class="iconfont icon-weiwancheng"></i>进行中</div>
            <div class="type" @click="searchByType('COMPLETED')"><i class="iconfont icon-yiwancheng"></i>已完成</div>
          </div>
          <li class="history-item" v-if="historyBtnVis" @click="handlerHistorySearch(item)" v-for="(item,index) in localStorageHistory" :key="index"><i class="iconfont icon-lishi"></i>{{item}}</li>
          <li class="history-clear" v-if="historyBtnVis" @click="clearLocalHistory"><span>删除历史</span></li>
        </ul>
      </div>
    </transition>
    <!-- 搜索结果展示 -->
    <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <ul class="search-result" v-show="contentVis">
        <li class="result-item" @mouseenter="hoverSearchItem(item)" @mouseleave="leaveSearchItem(item)"  @click="hanlderSearchItem(item)" v-for="(item,index) in searchResult" :key="index">
          <div class="cf">
            <div class="col-l">
              <a href="javascript:void(0)" class="no-1" :style="{backgroundPosition: `${-18*index}px -139px`}"></a>
            </div>
            <div class="col-r">
              <img :src="item.litpic" >
            </div>
            <div class="col-m">
              <div class="row"><span class="title">{{item.title}}</span></div>
              <div class="row"><span class="label">面积</span><div class="value">{{item.levy_area}}㎡</div></div>
              <div class="row"><span class="label">地址</span><div class="value">{{item.address}}</div></div>
              <div class="row detail" >
                <el-tooltip effect="dark" content="编辑点/面" placement="bottom">
                  <a href="javascript:void(0)" v-on:click.stop="inEditStatus(item)" style="marginRight: 10px; color: #e6a23c;"><i class="iconfont icon-shuxingliebiaoxiangqing"></i><p>编辑点/面</p></a>
                  </el-tooltip>
                <el-tooltip effect="dark" content="进入项目" placement="bottom">
                  <a href="javascript:void(0)" v-on:click.stop="goDetail(item)" style="color: #67c23a"><i class="iconfont icon-shuxingliebiaoxiangqing"></i><p>进入项目</p></a>
                </el-tooltip>
              </div>
            </div>
          </div>
        </li>
        <div class="pages" v-show="searchResult && searchResult.length>0">
          <el-pagination
            layout="prev, pager, next"
            :total="pageInfo.total"
            :current-page.sync="page"
            @current-change="handlerPage"
          >
          </el-pagination>
        </div>
        <p v-show="!searchResult || searchResult.length<1">查无此内容请重新搜索</p>
      </ul>
    </transition>
    <div style="clear: both"></div>
  </div>
</template>

<script>
import lodash from "lodash";
import { reqMapInfo } from "../api/index.js";
import { Pagination } from "element-ui";

export default {
  props: {
    searchInfo: Function,
    changePage: Function,
    clearShowResult: Function,
    hoverSearchItem: Function,
    leaveSearchItem: Function,
    hanlderSearchItem: Function,
    changeContentVis: Function,
    inEditStatus: Function,
    opneModal: Function,
    searchResult: Array,
    pageInfo: Object,
    contentVis: Boolean,
  },
  data() {
    return {
      search: "", //搜索内容
      historyVisible: false, //搜索框显示
      localStorageHistory: [],
      page: this.pageInfo.page,
      showResult: []
    };
  },
  computed: {
    historyBtnVis: function() {
      const l = this.localStorageHistory;
      return l && l.length > 0;
    },
    curPageResult: function() {
      return r;
    }
  },
  watch: {
    search: function(data) {
      this.handlerSearch(data);
    },
    pageInfo: function(data) {
      const s = this.searchResult;
      const r = s.splice(this.curpage - 1 * this.pageTotal, this.pageTotal);
      this.showResult = r;
    }
  },
  methods: {
    changeSearchContent() {},
    // 搜索
    handlerSearch: _.debounce(function() {
      if (this.search == "") {
        this.changeContentVis(false);
        this.clearShowResult();
      }
      // this.searchInfo(this.search);
      //更新搜索历史
    }, 500),
    // 通过回车或者点击搜索按钮进行search
    handlerSearchEnter() {
      // this.handlerSearch();
      this.searchInfo({ sKeys: this.search });
      this.updateHistory();
      this.changeContentVis(true);
    },
    //搜索框得到焦点
    searchFocus() {
      this.historyVisible = true;
    },
    // 清空搜索框
    clearSearch() {
      this.search = "";
      this.changeContentVis(false);
    },
    //搜索框失去焦点
    searchUnFocus() {
      this.historyVisible = false;
    },
    // 根据数据类型进行搜索
    searchByType(data) {
      this.searchInfo({ status: data });
      this.changeContentVis(true);
    },
    //更新搜索历史
    updateHistory(data) {
      let o = JSON.parse(localStorage.getItem("history")) || [];
      let k = this.search;
      if (o.indexOf(k) != -1) {
        o.splice(o.indexOf(k), 1);
      }
      o.unshift(this.search);
      localStorage.setItem("history", JSON.stringify(o));
      this.localStorageHistory = o;
    },
    //点击历史搜索
    handlerHistorySearch(data) {
      this.search = data;
      this.searchInfo({ sKeys: data });
      this.changeContentVis(true);
    },
    //去掉本地的历史缓存
    clearLocalHistory() {
      localStorage.removeItem("history");
      this.localStorageHistory = [];
    },
    // 改变页面
    handlerPage(data) {
      this.changePage(data);
    },
    // 跳转详情页面
    goDetail(data) {
      this.$router.push({path: '/project', query: data})
      
    }
  },
  mounted() {
    //初始化历史记录
    this.localStorageHistory = JSON.parse(localStorage.getItem("history"));
  },
  components: {
    "el-pagination": Pagination
  }
};
</script>

<style lang='less' scoped>
@import "../utils/theme.less";

// 搜索整体
#left-panel {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 98;
}
// 搜索框
#searchbox {
  border-radius: 2px;
  width: 386px;
  position: relative;
  z-index: 5;
  #searchbox-container {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    width: 329px;
    float: left;
    box-sizing: border-box;
    box-shadow: 1px 2px 1px @border-line;
    .searchbox-content {
      position: relative;
      width: 329px;
      border-radius: 2px 0 0 2px;
      background: #fff;
    }
  }
  .searchbox-content:after {
    font-size: 0;
    zoom: 1;
    content: " ";
    clear: both;
    display: block;
    hieght: 0;
    visibility: hidden;
  }
  #sole-input {
    box-sizing: border-box;
    border: 0;
    padding: 9px 0;
    border-left: 10px solid transparent;
    border-right: 27px solid transparent;
    line-height: 20px;
    font-size: 16px;
    height: 38px;
    color: #333;
    position: relative;
    border-radius: 2px 0 0 2px;
    width: 100%;
  }
  #sole-input:focus {
    outline: none;
  }
  .input-clear {
    right: 0;
    cursor: pointer;
    position: absolute;
    width: 27px;
    height: 38px;
    top: 0;
    line-height: 38px;
    color: @border-line;
    font-size: 20px;
  }
  #search-button {
    pointer-events: auto;
    background: url(http://webmap1.bdimg.com/wolfman/static/common/images/new/searchbox_f175577.png)
      no-repeat 0 -76px #3385ff;
    width: 57px;
    height: 38px;
    float: left;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 0 2px 2px 0;
    box-shadow: 1px 2px 1px @border-line;
  }
}

// 类型选择+搜索历史
#history {
  position: absolute;
  top: 38px;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 9999;
  border-top: 1px solid @border-line;
  border-bottom: 1px solid @border-line;
  .type-list {
    border-bottom: 1px solid @border-line;
    .type {
      width: 25%;
      box-sizing: border-box;
      display: inline-block;
      text-align: center;
      padding: 10px 8px;
      cursor: pointer;
      font-size: 12px;
      i {
        margin-right: 6px;
        font-size: 18px;
        vertical-align: middle;
      }
    }
  }
  .history-item {
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
    padding: 10px 8px;
    border-bottom: 1px solid @border-line;
    cursor: pointer;
    i {
      display: inline-block;
      margin: 0 6px 0 10px;
      vertical-align: middle;
      font-weight: 500;
    }
  }
  .history-clear {
    padding: 10px 8px;
    text-align: right;
    span {
      display: inline-block;
      font-size: 12px;
      cursor: pointer;
    }
  }
}

// 搜索内容展示
.search-result {
  position: absolute;
  left: 0;
  top: 38px;
  width: 329px;
  margin-top: 10px;
  padding: 10px;
  max-height: 730px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 2px 1px @border-line;
  overflow-x: hidden;
  border-radius: 2px;
  .result-item {
    display: list-item;
    padding: 6px 0;
    cursor: pointer;
    .cf {
      margin-bottom: 5px;
      .col-l {
        float: left;

        .no-1 {
          background-image: url("../assets/img/location-icon.png");
          width: 18px;
          height: 27px;
          display: inline-block;
          background-size: 300px, auto;
          margin-left: 6px;
          margin-top: 4px;
          background-position: 0 -139px;
        }
      }
      .col-m {
        margin: 0 85px 0 30px;
        .row {
          padding: 5px 0;
          line-height: 1.2;
          font-size: 12px;
          text-align: left;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          .title {
            color: @primary;
          }
          .label,
          .value {
            display: inline;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .label:after {
            content: ":";
            margin: 0 5px 0 2px;
            position: relative;
            top: -0.5px;
          }
        }
        .detail {
          a {
            color: @primary;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            i {
              display: inline-block;
              vertical-align: middle;
              margin-right: 6px;
            }
            p {
              display: inline-block;
              line-height: 20px;
              vertical-align: bottom;
            }
          }
        }
      }
      .col-r {
        float: right;
        img {
          max-width: 85px;
        }
      }
    }
  }
  .result-item:hover {
    background: @border-line;
  }
}
</style>
